<template>
	<view v-if="is_init">
		<uni-popup-input name="插件详情" @close="on_close">
			<view style="display: flex;flex-wrap: wrap;">
				<view class="banmi_input_edit a-c" style="width: 30%;">
					<view class="banmi_input_edit_name">
						应用名称:
					</view>
					<view class="banmi_input_val">
						{{find.plugin_name}}
					</view>
				</view>

				<view class="banmi_input_edit a-c" style="width: 30%;">
					<view class="banmi_input_edit_name">
						标示:
					</view>
					<view class="banmi_input_val">
						{{find.catalogue}}
					</view>
				</view>

				<view class="banmi_input_edit a-c" style="width: 30%;">
					<view class="banmi_input_edit_name">
						当前版本:
					</view>
					<view class="banmi_input_val banmi_flex a-c">
						V{{find.version}}
					</view>
				</view>
				<view v-if="find.branch_name" class="banmi_input_edit a-c" style="width: 30%;">
					<view class="banmi_input_edit_name">
						分支版本:
					</view>
					<view class="banmi_input_val">
						{{find.branch_name}}
					</view>
				</view>

				<view v-if="find.branch_name_version" class="banmi_input_edit a-c" style="width: 30%;">
					<view class="banmi_input_edit_name">
						分支版本:
					</view>
					<view class="banmi_input_val banmi_flex a-c">
						V{{find.branch_name_version}}
					</view>
				</view>

				<view class="banmi_input_edit a-c" style="width: 30%;">
					<view class="banmi_input_edit_name">
						安装时间:
					</view>
					<view class="banmi_input_val">
						<text>{{find.create_time|getTime}}</text>
					</view>
				</view>


			</view>

			<view class="">
				<iframe v-if="d_update_url" :src="d_update_url" style="width: 100%;height: 60vh;" id="myframe"
					name="iframePage" frameborder="0"></iframe>

			</view>




			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-upplu @ok="on_ok" :find="item" :plugin="find">
				</uni-popup-upplu>
			</uni-popup>

		</uni-popup-input>
	</view>
</template>

<script>
	import {
		buildMenus,
		getParents,
		patTree,
		getSortMenu
	} from '@/components/uni-data-menu/util.js'

	export default {
		components: {

		},
		props: {
			update_url: {
				type: [String, Number],
				default: ''
			},
		},
		data() {
			return {
				is_init: false,
				v_logs: [],
				up_find: {},
				item: {},
				find: {},
				d_update_url: ''

			}
		},
		mounted() {
			let that = this
			window.addEventListener('message', function(event) {
				if (event.data.id >= 1) {

					if (event.data.type == 'update') {

						that.ttkey = event.data.ttkey
						that.t = event.data.t
						that.sign = event.data.sign
						that.update_id = event.data.id

						that.up_version = event.data.version

						that.item['up_version'] = that.up_version;
						that.item['version'] = that.find.version;
						that.item['id'] = that.update_id;
						that.item['sign'] = that.sign;
						that.item['ttkey'] = that.ttkey;
						that.item['t'] = that.t;


						that.on_update();

					}


				}
			}, false);
		},

		methods: {
			on_ok(version) {
				let that = this;
				this.find.version = version;
				console.log("22222222: " + JSON.stringify(22222222));
			 	this.$emit('confirm');
				setTimeout(function() { 
					that.on_close();
				}, 500);
			 
				 

			},
			on_update() {


				let that = this;
				uni.showModal({
					title: '确认更新吗',
					content: '更新应用前请先备份数据库和源码在更新以免更新中途出问题',
					confirmText: '确认更新',
					success: function(res) {
						if (res.confirm) {

							that.$refs.alertDialog.open()
						}
					}
				});
			},

			objectToQueryString(obj) {
				return Object.keys(obj)
					.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
					.join('&');
			},
			async init(id) {
				this.id = id;
				let requestParams = {
					plugin_id: this.id,
				};
				const ret = await this.Banmikeji.Pluginlist_home_index(requestParams);
				this.find = ret.data.find;
				var u = this.objectToQueryString(this.find);
				this.d_update_url = this.update_url + '&' + u
				this.text = ret.data.find['h5_url'];
				this.is_install = ret.data.is_install;
				this.config = ret.data.config;
				this.is_init = true;
			},
			on_close() {
				this.find = {}
				this.is_init = false;
			},


		}
	}
</script>

<style>
	/* 	button::after {
		border: none;
	} */

	.top_head {
		background-color: #F8F8F8;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.but {
		width: 120rpx;
		height: 100rpx;
		padding: 0;
		border: 0;
		background-color: transparent;
		outline: none;
	}

	button {
		padding: 0;

		/* 	background: transparent; */
	}

	.top_but {
		background-color: #F8F8F8;
		width: 100%;
		height: 100rpx;
		top: 0;
		left: 0;
		z-index: 999;
		position: sticky
	}

	.zu_but {
		position: fixed;
		height: 100rpx;
		z-index: 999;
		background-color: #F8F8F8;
		bottom: 288rpx;
	}

	.option_box {
		width: 35rpx;
		height: 35rpx;
		border: 1rpx solid #999999;
		border-radius: 5px;
		margin-right: 10rpx;
		// background-color: #FF852A;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
		}
	}

	.option_box_active {
		background: linear-gradient(-30deg, #ff7029 0%, #faa307 100%);
		border: 1rpx solid #faa307 !important;
	}

	.sub_btn_add {
		margin-left: 30rpx;
		width: 150rpx;
		height: 60rpx;
		background: linear-gradient(-30deg, #A9A9A9 0%, #A9A9A9 100%);
		border-radius: 44rpx;

		font-size: 30rpx;
		font-weight: 700;
		color: #ffffff;

		line-height: 60rpx;
	}

	.sub_btn {

		height: 70rpx;
		width: 100rpx;
		background: #0071FE;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 70rpx;
	}
</style>